<style lang="less">
  @import "./Home";
</style>

<template>
    <div class="home">
      <div class="home-menu">
        <img src="../../assets/home-logo.png" style=" width: 160px;height: 50px;position: relative;top: 15px"/>
        <Divider></Divider>
        <menu-navigation></menu-navigation>
      </div>
      <div class="home-header">
        <div class="home-header-login">
          <Row>
            <Col span="2">
              <Breadcrumb>
                <BreadcrumbItem to="/home">
                  <Icon type="ios-home-outline"></Icon> Home
                </BreadcrumbItem>
              </Breadcrumb>
            </Col>
            <Col span="2" offset="20">
              <Button icon="ios-log-out" @click="confirm">退出</Button>
            </Col>
          </Row>
        </div>
        <div class="home-header-tab">
          <Row>
            <Col span="1" order="1" style="height: 33px"><Button icon="ios-arrow-back"></Button></Col>
            <Col span="21" order="2" style="background-color: gainsboro;height: 33px">
              <div style="position: absolute;left: 0px">
                <router-link to="/home">
                  <Tag type="dot" color="primary">home</Tag>
                </router-link>
              </div>
            </Col>
            <Col span="1" order="3" style="height: 33px"><Button icon="ios-arrow-forward"></Button></Col>
            <Col span="1" order="4" style="height: 33px"><Button icon="ios-close-circle-outline"></Button></Col>
          </Row>
        </div>
      </div>
      <div class="home-body">
        <home-body></home-body>
      </div>
    </div>
</template>

<script>
  import MenuNavigation from '../../components/menu-nagivation/menu-navigation.vue'
  import HomeBody from '../../components/home-body/home-body'
    export default {
        name: "Home",
      components:{
        MenuNavigation,
        HomeBody,
      },
      data(){
          return{

          }
      },
      methods:{
        login(){
          this.$router.push('/home')
        },
        confirm () {
          this.$Modal.confirm({
            title: '退出登陆',
            width:200,
            content: '<p>确定退出登陆</p>',
            onOk: () => {
              this.$router.push('/');
            },
            onCancel: () => {
              // this.$Message.info('取消');
            }
          });
        },
      }
    }
</script>

<style scoped>

</style>
